﻿@page "/components/searchbox"
@page "/components/search-box"

<PageOutlet Url="components/searchbox"
            Title="SearchBox"
            Description="searchbox component of the bit BlazorUI components" />

<div>
    <DemoPage Name="SearchBox"
              Description="A search box (SearchBox) provides an input field for searching content within a site or app to find specific items."
              Parameters="componentParameters"
              SubClasses="componentSubClasses"
              SubEnums="componentSubEnums"
              PublicMembers="componentPublicMembers"
              GitHubUrl="Inputs/SearchBox/BitSearchBox.razor"
              GitHubDemoUrl="Inputs/SearchBox/BitSearchBoxDemo.razor">
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
            <div>Basic examples of BitSearchBox including a default and a disabled state.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="Search" />
                <br />
                <BitSearchBox Placeholder="ReadOnly" ReadOnly />
                <br />
                <BitSearchBox Placeholder="Disabled" IsEnabled="false" />
            </div>
        </DemoExample>

        <DemoExample Title="Underlined" RazorCode="@example2RazorCode" Id="example2">
            <div>Demonstrating the underlined style of BitSearchBox in both enabled and disabled states.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="Search" Underlined />
                <br />
                <BitSearchBox Placeholder="Disabled" IsEnabled="false" Underlined />
            </div>
        </DemoExample>

        <DemoExample Title="NoBorder" RazorCode="@example3RazorCode" Id="example3">
            <div>Demonstrating the no-border style of BitSearchBox in both enabled and disabled states.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="Search" NoBorder />
                <br />
                <BitSearchBox Placeholder="Disabled" IsEnabled="false" NoBorder />
            </div>
        </DemoExample>

        <DemoExample Title="Background" RazorCode="@example4RazorCode" Id="example4">
            <div>Demonstrating the background color kinds of BitSearchBox.</div><br />
            <div class="example-box" style="padding:1rem;background:var(--bit-clr-bg-dis)">
                <BitSearchBox Placeholder="Primary (default)" Background="BitColorKind.Primary" NoBorder />
                <br />
                <BitSearchBox Placeholder="Secondary" Background="BitColorKind.Secondary" NoBorder />
                <br />
                <BitSearchBox Placeholder="Tertiary" Background="BitColorKind.Tertiary" NoBorder />
                <br />
                <BitSearchBox Placeholder="Transparent" Background="BitColorKind.Transparent" NoBorder />
            </div>
        </DemoExample>

        <DemoExample Title="Icon" RazorCode="@example5RazorCode" Id="example5">
            <div>Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="FixedIcon" FixedIcon />
                <br />
                <BitSearchBox Placeholder="DisableAnimation" DisableAnimation />
                <br />
                <BitSearchBox Placeholder="Custom icon" IconName="@BitIconName.Filter" />
                <br />
                <BitSearchBox Placeholder="HideIcon" HideIcon />
            </div>
        </DemoExample>

        <DemoExample Title="Search Button" RazorCode="@example6RazorCode" Id="example6">
            <div>Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="Search" ShowSearchButton />
                <br />
                <BitSearchBox Placeholder="SearchButtonIconName" ShowSearchButton SearchButtonIconName="PageListFilter" />
                <br />
                <BitSearchBox Placeholder="SearchButtonTemplate" ShowSearchButton>
                    <SearchButtonTemplate>
                        <BitIcon IconName="@BitIconName.SearchAndApps" />
                    </SearchButtonTemplate>
                </BitSearchBox>
                <br />
                <BitSearchBox Placeholder="Disabled" IsEnabled="false" ShowSearchButton />
                <br />
                <BitSearchBox Placeholder="Underlined" Underlined ShowSearchButton />
                <br />
                <BitSearchBox Placeholder="Disabled Underlined" IsEnabled="false" Underlined ShowSearchButton />
                <br />
                <BitSearchBox Placeholder="NoBorder" NoBorder ShowSearchButton />
                <br />
                <BitSearchBox Placeholder="Disabled NoBorder" IsEnabled="false" NoBorder ShowSearchButton />
            </div>
        </DemoExample>

        <DemoExample Title="Clear Button" RazorCode="@example7RazorCode" Id="example7">
            <div>Showcasing BitSearchBox with a clear button in various configurations, including custom button icon and hide this button.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="HideClearButton" HideClearButton />
                <br />
                <BitSearchBox Placeholder="ClearButtonTemplate">
                    <ClearButtonTemplate>
                        <BitIcon IconName="@BitIconName.RemoveFilter" />
                    </ClearButtonTemplate>
                </BitSearchBox>
            </div>
        </DemoExample>

        <DemoExample Title="Prefix & Suffix" RazorCode="@example8RazorCode" Id="example8">
            <div>Explore prefixing and suffixing features of the BitSearchbox.</div><br />
            <div class="example-box">
                <BitSearchBox Placeholder="Prefix" Prefix="https://" HideIcon />
                <br />
                <BitSearchBox Placeholder="Suffix" Suffix=".com" HideIcon />
                <br />
                <BitSearchBox Placeholder="Prefix & Suffix + Icon" Prefix="https://" Suffix=".com" />
                <br />
                <BitSearchBox Placeholder="Templates" HideIcon>
                    <PrefixTemplate>
                        <BitStack FitWidth Alignment="BitAlignment.Center" style="background:gray;padding:0 0.5rem;">
                            <BitIcon IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" />
                        </BitStack>
                    </PrefixTemplate>
                    <SuffixTemplate>
                        <BitStack FitWidth Alignment="BitAlignment.Center" style="background:cadetblue;padding:0 0.5rem;">
                            <BitIcon IconName="@BitIconName.ArrowTallUpRight" Color="BitColor.PrimaryForeground" />
                        </BitStack>
                    </SuffixTemplate>
                </BitSearchBox>
            </div>
        </DemoExample>

        <DemoExample Title="Binding" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
            <div>Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.</div>
            <br /><br />
            <div class="example-box">
                <div>Two-way</div><br />
                <BitSearchBox Placeholder="Search" @bind-Value="twoWaySearchValue" />
                <br />
                <BitTextField Placeholder="Search Value" @bind-Value="twoWaySearchValue" />
                <br /><br /><br />
                <div>Immediate</div><br />
                <BitSearchBox Placeholder="Search" Immediate @bind-Value="immediateTwoWaySearchValue" />
                <br />
                <BitTextField Placeholder="Search Value" Immediate @bind-Value="immediateTwoWaySearchValue" />
                <br /><br /><br />
                <div>OnChange</div><br />
                <BitSearchBox Placeholder="Search" Immediate
                              OnChange="s => onChangeSearchValue = s"
                              OnClear="() => onChangeSearchValue = string.Empty" />
                <br />
                <div>Search Value: @onChangeSearchValue</div>
                <br /><br /><br />
                <div>OnSearch (Search by Enter)</div><br />
                <BitSearchBox Placeholder="Search" Immediate
                              OnSearch="s => onSearchValue = s"
                              OnClear="() => onSearchValue = string.Empty" />
                <br />
                <div>Search Value: @onSearchValue</div>
            </div>
        </DemoExample>

        <DemoExample Title="Suggestion (AutoComplete)" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
            <div>Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.</div>
            <br /><br />
            <div class="example-box">
                <div><b>SuggestItems</b></div><br />
                <BitSearchBox @bind-Value="@searchValue"
                              Immediate
                              Placeholder="e.g. app"
                              SuggestItems="GetSuggestedItems()" />
                <br />
                <div>SearchValue: @searchValue</div>
                <br /><br /><br />
                <div><b>SuggestFilterFunction</b></div><br />
                <BitSearchBox @bind-Value="@searchValueWithSuggestFilterFunction"
                              Immediate
                              Placeholder="e.g. app"
                              SuggestItems="GetSuggestedItems()"
                              SuggestFilterFunction="@SearchFunc" />
                <br />
                <div>SearchValue: @searchValueWithSuggestFilterFunction</div>
                <br /><br /><br />
                <div><b>MinSuggestTriggerChars(1)</b></div><br />
                <BitSearchBox @bind-Value="@searchValueWithMinSearchLength"
                              Immediate
                              Placeholder="e.g. app"
                              MinSuggestTriggerChars="1"
                              SuggestItems="GetSuggestedItems()" />
                <br />
                <div>SearchValue: @searchValueWithMinSearchLength</div>
                <br /><br /><br />
                <div><b>MaxSuggestCount(2)</b></div><br />
                <BitSearchBox @bind-Value="@searchValueWithMaxSuggestedItems"
                              Immediate
                              Placeholder="e.g. app"
                              MaxSuggestCount="2"
                              SuggestItems="GetSuggestedItems()" />
                <br />
                <div>SearchValue: @searchValueWithMaxSuggestedItems</div>
                <br /><br /><br />
                <div><b>DebounceTime(2000)</b></div><br />
                <BitSearchBox @bind-Value="@searchValueWithSearchDelay"
                              Immediate
                              DebounceTime="2000"
                              Placeholder="e.g. app"
                              SuggestItems="GetSuggestedItems()" />
                <br />
                <div>SearchValue: @searchValueWithSearchDelay</div>
                <br /><br /><br />
                <div><b>ItemsProvider</b></div><br />
                <BitSearchBox @bind-Value="@searchValueWithItemsProvider"
                              Immediate
                              Placeholder="e.g. pro"
                              SuggestItemsProvider="LoadItems" />
                <br />
                <div>SearchValue: @searchValueWithItemsProvider</div>
                <br /><br /><br />
                <div><b>Modeless</b></div><br />
                <BitSearchBox Modeless
                              Immediate
                              DebounceTime="300"
                              Placeholder="e.g. pro"
                              SuggestItemsProvider="LoadItems" />
                <br /><br /><br />
                <div><b>FixedCalloutWidth</b></div><br />
                <BitSearchBox Immediate
                              FixedCalloutWidth
                              Placeholder="e.g. app"
                              SuggestItems="GetLongSuggestedItems()" />
            </div>
        </DemoExample>

        <DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
            <div>Demonstrating validation of BitSearchBox using data annotations.</div><br />
            <div class="example-box">
                <EditForm Model="validationModel">
                    <DataAnnotationsValidator />
                    <BitSearchBox Placeholder="Search" Immediate
                                  DefaultValue="This is default value"
                                  @bind-Value="validationModel.Text" />
                    <ValidationMessage For="() => validationModel.Text" />
                </EditForm>
            </div>
        </DemoExample>

        <DemoExample Title="Color" RazorCode="@example12RazorCode" Id="example12">
            <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
            <br /><br />
            <div class="example-box">
                <BitSearchBox Placeholder="Primary" ShowSearchButton Color="BitColor.Primary" />
                <br />
                <BitSearchBox Placeholder="Primary" ShowSearchButton Color="BitColor.Primary" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="Secondary" ShowSearchButton Color="BitColor.Secondary" />
                <br />
                <BitSearchBox Placeholder="Secondary" ShowSearchButton Color="BitColor.Secondary" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="Tertiary" ShowSearchButton Color="BitColor.Tertiary" />
                <br />
                <BitSearchBox Placeholder="Tertiary" ShowSearchButton Color="BitColor.Tertiary" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="Info" ShowSearchButton Color="BitColor.Info" />
                <br />
                <BitSearchBox Placeholder="Info" ShowSearchButton Color="BitColor.Info" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="Success" ShowSearchButton Color="BitColor.Success" />
                <br />
                <BitSearchBox Placeholder="Success" ShowSearchButton Color="BitColor.Success" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="Warning" ShowSearchButton Color="BitColor.Warning" />
                <br />
                <BitSearchBox Placeholder="Warning" ShowSearchButton Color="BitColor.Warning" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="SevereWarning" ShowSearchButton Color="BitColor.SevereWarning" />
                <br />
                <BitSearchBox Placeholder="SevereWarning" ShowSearchButton Color="BitColor.SevereWarning" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="Error" ShowSearchButton Color="BitColor.Error" />
                <br />
                <BitSearchBox Placeholder="Error" ShowSearchButton Color="BitColor.Error" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="PrimaryBackground" ShowSearchButton Color="BitColor.PrimaryBackground" />
                <br />
                <BitSearchBox Placeholder="PrimaryBackground" ShowSearchButton Color="BitColor.PrimaryBackground" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="SecondaryBackground" ShowSearchButton Color="BitColor.SecondaryBackground" />
                <br />
                <BitSearchBox Placeholder="SecondaryBackground" ShowSearchButton Color="BitColor.SecondaryBackground" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="TertiaryBackground" ShowSearchButton Color="BitColor.TertiaryBackground" />
                <br />
                <BitSearchBox Placeholder="TertiaryBackground" ShowSearchButton Color="BitColor.TertiaryBackground" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="PrimaryForeground" ShowSearchButton Color="BitColor.PrimaryForeground" />
                <br />
                <BitSearchBox Placeholder="PrimaryForeground" ShowSearchButton Color="BitColor.PrimaryForeground" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="SecondaryForeground" ShowSearchButton Color="BitColor.SecondaryForeground" />
                <br />
                <BitSearchBox Placeholder="SecondaryForeground" ShowSearchButton Color="BitColor.SecondaryForeground" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="TertiaryForeground" ShowSearchButton Color="BitColor.TertiaryForeground" />
                <br />
                <BitSearchBox Placeholder="TertiaryForeground" ShowSearchButton Color="BitColor.TertiaryForeground" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="PrimaryBorder" ShowSearchButton Color="BitColor.PrimaryBorder" />
                <br />
                <BitSearchBox Placeholder="PrimaryBorder" ShowSearchButton Color="BitColor.PrimaryBorder" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="SecondaryBorder" ShowSearchButton Color="BitColor.SecondaryBorder" />
                <br />
                <BitSearchBox Placeholder="SecondaryBorder" ShowSearchButton Color="BitColor.SecondaryBorder" Underlined />
                <br /><br /><br />
                <BitSearchBox Placeholder="TertiaryBorder" ShowSearchButton Color="BitColor.TertiaryBorder" />
                <br />
                <BitSearchBox Placeholder="TertiaryBorder" ShowSearchButton Color="BitColor.TertiaryBorder" Underlined />
            </div>
        </DemoExample>

        <DemoExample Title="Style & Class" RazorCode="@example13RazorCode" Id="example13">
            <div>Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.</div>
            <br /><br />
            <div class="example-box">
                <div>Component's Style & Class:</div><br />
                <BitSearchBox Placeholder="Style" Style="box-shadow: dodgerblue 0 0 1rem; margin-inline: 1rem;" />
                <br />
                <BitSearchBox Placeholder="Class" Class="custom-class" />
                <br /><br /><br />
                <div>Styles & Classes:</div><br />
                <BitSearchBox Placeholder="Styles"
                              Styles="@(new() { Root = "margin-inline: 1rem;",
                                                Input = "padding: 0.5rem;",
                                                Focused = "--focused-background: #b2b2b25a;",
                                                InputContainer = "background: var(--focused-background);" })" />
                <br />
                <BitSearchBox FixedIcon
                              Placeholder="Classes"
                              Classes="@(new() { Root = "custom-root",
                                                 Icon = "custom-icon",
                                                 Focused = "custom-focused",
                                                 ClearButton = "custom-clear",
                                                 IconWrapper = "custom-icon-wrapper",
                                                 InputContainer = "custom-input-container" })" />
            </div>
        </DemoExample>

        <DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14">
            <div>Use the BitSearchBox component in right-to-left (RTL).</div><br />
            <div dir="rtl">
                <div class="example-box">
                    <BitSearchBox Placeholder="جستجو" Dir="BitDir.Rtl" />
                    <br />
                    <BitSearchBox Placeholder="جستجو" Dir="BitDir.Rtl" ShowSearchButton />
                    <br />
                    <BitSearchBox Placeholder="جستجو" Dir="BitDir.Rtl" Underlined />
                </div>
            </div>
        </DemoExample>
    </DemoPage>
</div>
